import { ISelectEventParam } from "@manycore/custom-ksg-viewer-sdk";
import { useEffect, useMemo, useState } from "react";
import { AppStore, EViewType } from "../../../store";
import { flattenModels } from "../../../util";
import ToolTip from 'antd/es/tooltip'
import './index.less';


export function ModelInfo() {
    const { appState: { app, viewInfo, jsonData } } = AppStore.useContainer();

    const [selectInfo, setSelectInfo] = useState<ISelectEventParam[0]>();


    useEffect(() => {
        const selectChange = (info: ISelectEventParam) => {
            console.log(info)
            setSelectInfo(info[0]);
        }

        app!.selectionService.on(selectChange);

        return () => {
            app!.selectionService.off(selectChange);
        }
    }, [app]);

    const selectModeInfo = useMemo(() => {
        try {
            if (!jsonData || !selectInfo) {
                return undefined;
            }
            const models = flattenModels(jsonData.paramModel || []);
            const selectModel = models.find((m) => m.id === selectInfo.id);
            return selectModel;
        } catch {
            console.error('json parse error');
        }
    }, [selectInfo, jsonData]);

    const topModelInfo = useMemo(() => {
        try {
            // 后端json获取接口如果查询的参数化模型 会把组合全部查出来
            const modelId = viewInfo?.type === EViewType.Design ? viewInfo.info.modelId : undefined;
            const assembly = jsonData?.assemblyModels?.find(ass => ass.id === modelId);
            const paramModel = jsonData?.paramModel.find(p => p.id === modelId);

            if (assembly) {
                return {
                    id: assembly.id,
                    name: assembly.name
                }
            } else if (paramModel) {
                return {
                    id: paramModel.id,
                    name: paramModel.modelName
                }
            }
        } catch (err) {
            console.error('json parse error');
        }

    }, [viewInfo, jsonData])


    function renderFormItem(key: string, value: string) {
        return (
            <div className="form-item" key={key}>
                <span className="span-text" style={{ width: '60px', fontWeight: 'bold' }}>{key}</span>
                <ToolTip title={value}>
                    <span className="span-text">{value}</span>
                </ToolTip>

            </div>
        )
    }


    return (<div className="model-info-main">
        <div className='top-model-block'>
            {renderFormItem('柜子名称', topModelInfo?.name || '')}
            {renderFormItem('柜子编码', topModelInfo?.id || '')}
        </div>
        <div className="bottom-select-model-block">
            {renderFormItem('板件名称', selectModeInfo?.modelName || '')}
            {renderFormItem('板件编码', selectModeInfo?.id || '')}
        </div>
        {selectModeInfo?.parameters?.length && <div className="bottom-select-model-block">
            {renderFormItem('模型参数', '')}
            {selectModeInfo?.parameters.map(param => renderFormItem(param.displayName || param.name, param.value))}
        </div>}
    </div>)
}
